<template>
    <!-- 照片 配置 -->
    <div class="prop-picture">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="id">{{ data.id }}</el-form-item>
            <el-form-item label="元素">
                <el-radio-group v-model="data.options.display">
                    <el-radio-button label="block">块</el-radio-button>
                    <el-radio-button label="inline-block">行内</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="width">
                <el-input-number v-model="data.options.width" placeholder="宽度" :controls="false"></el-input-number>
                <span class="unit">(px)</span>
            </el-form-item>
            <el-form-item label="height">
                <el-input-number v-model="data.options.height" placeholder="高度" :controls="false"></el-input-number>
                <span class="unit">(px)</span>
            </el-form-item>
            <el-form-item label="适应容器">
                <el-radio-group class="fit" v-model="data.options.fit">
                    <el-radio-button label="fill">fill</el-radio-button>
                    <el-radio-button label="contain">contain</el-radio-button>
                    <el-radio-button label="cover">cover</el-radio-button>
                    <el-radio-button label="none">none</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="alt">
                <el-input v-model.trim="data.options.alt" placeholder="img原生alt" clearable></el-input>
            </el-form-item>
            <el-form-item label="绑定字段">
                <el-input v-model.trim="data.options.src" type="textarea" :rows="4" placeholder="根据Api配置 src绑定字段，多个绑定字段使用逗号分隔如： imgSrc1, imgSrc2"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "PropPicture",
    props: {
        data: {
            type: Object
        }
    },
}
</script>
